<template>
  <div class="userinfo">
    <div class="header">
      <!-- <UserProfileHeader :user-info="state" /> -->
    </div>
    <LCR>
      <template #left>
        <UserProfileCard :user-info="state"></UserProfileCard>
      </template>
      <UserProfileContent :id="state.userId">111</UserProfileContent>
    </LCR>
    <!-- {{ $route.params }}
    <p v-for="entry in Object.entries(state)">
      {{ entry }}
    </p> -->
  </div>
</template>

<script setup lang="ts">
import { findUserByUserName } from "@/api/user";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import LCR from "@/layout/LCR.vue";
import UserProfileCard from "./profile/UserProfileCard.vue";
import UserProfileContent from "./profile/UserProfileContent.vue";
const route = useRoute();

const state = ref({
  userId: "",
  avatar: "",
  userName: "",
  nickName: "",
  email: "",
  phone: "",
  remark: "",
});
onMounted(() => {
  const { userName } = route.params;
  if (userName) {
    findUserByUserName(userName).then((res) => {
      state.value = res.data;
    });
  }
});
</script>

<style scoped>
.userinfo {
  width: 80%;
  margin: 0 auto;
}
</style>
